<template>
  <div class="dashboard-container">
    <div class="welcome-banner">
      <h2>您好，{{ userName }}！</h2>
      <div class="last-login">上次登录: {{ lastLoginTime }}</div>
    </div>

    <div class="grid-container">
      <!-- 系统公告 -->
      <el-card class="box-card notice-card">
        <template #header>
          <div class="card-header">
            <el-icon><Bell /></el-icon>
            <span>系统公告</span>
          </div>
        </template>
        <div class="notice-content">
          <el-empty v-if="!notices.length" description="暂无公告" />
          <el-collapse v-else accordion :animation="false">
            <el-collapse-item
              v-for="notice in notices"
              :key="notice.id"
              :name="notice.id"
              style="min-height: 50px;"
            >
              <template #title>
                <div class="notice-header">
                  <el-tag :type="notice.type" size="small" class="notice-tag">
                    {{ notice.tag }}
                  </el-tag>
                  <span class="notice-title">{{ notice.title }}</span>
                  <span class="notice-time">{{ notice.time }}</span>
                </div>
              </template>
              <div class="notice-detail">
                <p>{{ notice.content }}</p>
                <div class="notice-footer" v-if="notice.link">
                  <el-link :href="notice.link" type="primary" target="_blank">
                    查看详情
                  </el-link>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-card>

      <!-- 系统管理员面板 -->
      <template v-if="userRole === 'SYSTEM_ADMIN'">
        <el-card class="box-card stats-card">
          <template #header>
            <div class="card-header">
              <el-icon><DataAnalysis /></el-icon>
              <span>系统概览</span>
            </div>
          </template>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ systemStats.totalUsers }}</div>
              <div class="stat-label">总用户数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ systemStats.activeUsers }}</div>
              <div class="stat-label">活跃用户</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ systemStats.todayLogins }}</div>
              <div class="stat-label">今日登录</div>
            </div>
          </div>
        </el-card>

        <el-card class="box-card quick-actions">
          <template #header>
            <div class="card-header">
              <el-icon><Operation /></el-icon>
              <span>快捷操作</span>
            </div>
          </template>
          <div class="action-grid">
            <el-button type="primary" @click="router.push('/main/user-mgmt')">
              <el-icon><User /></el-icon>用户管理
            </el-button>
            <el-button type="success" @click="router.push('/main/parking-mgmt')">
              <el-icon><Van /></el-icon>车位管理
            </el-button>
            <el-button type="warning" @click="router.push('/main/fee-mgmt')">
              <el-icon><Wallet /></el-icon>费用管理
            </el-button>
          </div>
        </el-card>
      </template>

      <!-- 物业管理员面板 -->
      <template v-if="userRole === 'COMMUNITY_ADMIN'">
        <el-card class="box-card stats-card">
          <template #header>
            <div class="card-header">
              <el-icon><DataAnalysis /></el-icon>
              <span>待办事项</span>
            </div>
          </template>
          <div class="stats-grid">
            <div class="stat-item warning">
              <div class="stat-value">{{ propertyStats.pendingRepairs }}</div>
              <div class="stat-label">待处理报修</div>
            </div>
            <div class="stat-item info">
              <div class="stat-value">{{ propertyStats.pendingVisitors }}</div>
              <div class="stat-label">待审核访客</div>
            </div>
            <div class="stat-item danger">
              <div class="stat-value">{{ propertyStats.unpaidFees }}</div>
              <div class="stat-label">未缴费住户</div>
            </div>
          </div>
        </el-card>

        <el-card class="box-card task-list">
          <template #header>
            <div class="card-header">
              <el-icon><List /></el-icon>
              <span>今日任务</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="task in todayTasks"
              :key="task.id"
              :type="task.status"
              :timestamp="task.time"
            >
              {{ task.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </template>

      <!-- 管理员面板 -->
      <template v-if="userRole === 'ADMIN'">
        <el-card class="box-card stats-card">
          <template #header>
            <div class="card-header">
              <el-icon><DataAnalysis /></el-icon>
              <span>系统概览</span>
            </div>
          </template>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ systemStats.totalUsers }}</div>
              <div class="stat-label">总用户数</div>
            </div>
            <div class="stat-item warning">
              <div class="stat-value">{{ propertyStats.pendingRepairs }}</div>
              <div class="stat-label">待处理报修</div>
            </div>
            <div class="stat-item info">
              <div class="stat-value">{{ propertyStats.pendingVisitors }}</div>
              <div class="stat-label">待审核访客</div>
            </div>
            <div class="stat-item danger">
              <div class="stat-value">{{ propertyStats.unpaidFees }}</div>
              <div class="stat-label">未缴费住户</div>
            </div>
          </div>
        </el-card>
      </template>
      <!-- 居民用户面板 -->
      <template v-if="userRole === 'RESIDENT'">
        <el-card class="box-card resident-info">
          <template #header>
            <div class="card-header">
              <el-icon><User /></el-icon>
              <span>我的信息</span>
            </div>
          </template>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">房屋信息：</span>
              <span class="value">{{ residentInfo.room }}</span>
            </div>
            <div class="info-item">
              <span class="label">车位信息：</span>
              <span class="value">{{ residentInfo.parking }}</span>
            </div>
            <div class="info-item">
              <span class="label">物业费到期：</span>
              <span class="value">{{ residentInfo.propertyFeeExpire }}</span>
            </div>
            <div class="info-item">
              <span class="label">停车费到期：</span>
              <span class="value">{{ residentInfo.parkingFeeExpire }}</span>
            </div>
          </div>
        </el-card>

        <el-card class="box-card service-shortcuts">
          <template #header>
            <div class="card-header">
              <el-icon><Service /></el-icon>
              <span>快捷服务</span>
            </div>
          </template>
          <div class="service-grid">
            <div class="service-item" @click="router.push('/main/repair')">
              <el-icon><Tools /></el-icon>
              <span>在线报修</span>
            </div>
            <div class="service-item" @click="router.push('/main/visitor')">
              <el-icon><UserFilled /></el-icon>
              <span>访客登记</span>
            </div>
            <div class="service-item" @click="router.push('/main/parking')">
              <el-icon><Van /></el-icon>
              <span>车位预约</span>
            </div>
            <div class="service-item" @click="router.push('/main/property')">
              <el-icon><Wallet /></el-icon>
              <span>物业缴费</span>
            </div>
          </div>
        </el-card>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Bell, DataAnalysis, User, Van, Wallet, Operation, 
  List, Service, Tools, UserFilled 
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const router = useRouter()
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
const userRole = computed(() => userInfo.role || 'GUEST')
const userName = computed(() => userInfo.username || '游客')
const lastLoginTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))

// 系统公告数据 - 使用更丰富的静态数据结构
const notices = ref([
  {
    id: 1,
    title: '关于开展春季社区环境整治活动的通知',
    content: '为创造整洁、优美的社区环境，我们将于本周六（3月23日）开展春季环境整治活动。请各位业主配合工作，减少装修和大件垃圾的堆放。活动当天将安排专人进行垃圾分类指导。',
    type: 'success',
    tag: '活动',
    time: '2024-03-20',
    link: null
  },
  {
    id: 2,
    title: '电梯维保计划公示',
    content: '为确保小区电梯安全运行，定于3月25日至3月26日进行电梯年度维保。维保期间可能会造成部分电梯暂时停运，请提前做好出行安排。',
    type: 'warning',
    tag: '维护',
    time: '2024-03-18',
    link: '/notice/elevator-maintenance'
  },
  {
    id: 3,
    title: '2024年第二季度物业费缴纳通知',
    content: '请各位业主于4月1日前完成第二季度物业费缴纳。如有疑问，请联系物业服务中心。',
    type: 'info',
    tag: '缴费',
    time: '2024-03-15',
    link: null
  }
])

// 系统管理员数据
const systemStats = ref({
  totalUsers: 1250,
  activeUsers: 856,
  todayLogins: 126
})

// 物业管理员数据
const propertyStats = ref({
  pendingRepairs: 5,
  pendingVisitors: 3,
  unpaidFees: 8
})

const todayTasks = ref([
  { id: 1, content: '巡检电梯设备', time: '09:00', status: 'success' },
  { id: 2, content: '处理业主报修', time: '10:30', status: 'warning' },
  { id: 3, content: '审核访客申请', time: '14:00', status: 'info' }
])

// 居民用户数据
const residentInfo = ref({
  room: 'A栋1单元1203室',
  parking: '地下停车场A区12号',
  propertyFeeExpire: '2024-12-31',
  parkingFeeExpire: '2024-06-30'
})

// 初始化数据
onMounted(() => {
  // 这里可以调用API获取实际数据
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-banner {
  margin-bottom: 24px;
}

.welcome-banner h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.last-login {
  margin-top: 8px;
  color: #909399;
  font-size: 14px;
}

.grid-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.box-card {
  transition: all 0.3s;
}

.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-content {
  max-height: 500px;
  overflow-y: scroll; /* 始终显示垂直滚动条 */
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.notice-tag {
  flex-shrink: 0;
}

.notice-title {
  flex: 1;
  font-weight: 500;
}

.notice-time {
  color: #909399;
  font-size: 13px;
  flex-shrink: 0;
}

.notice-detail {
  padding: 12px 0;
  color: #606266;
  line-height: 1.6;
}

.notice-footer {
  margin-top: 12px;
  text-align: right;
}

:deep(.el-collapse-item__header) {
  padding: 12px 0;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 12px;
}

.notice-content .notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #EBEEF5;
}

.notice-content .notice-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-content .notice-time {
  color: #909399;
  font-size: 13px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}

.stat-item {
  padding: 16px;
  border-radius: 8px;
  background: #f8f9fa;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
  margin-bottom: 8px;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s;
}

.service-item:hover {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.service-item .el-icon {
  font-size: 24px;
}

.info-grid {
  display: grid;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  width: 100px;
  color: #606266;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .action-grid {
    grid-template-columns: 1fr;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>